<template>
    <div class="person">
        <h1>需求:水温达到100℃,或水位达到100CM,则联系服务器</h1>
        <h2>水温:{{ temp }}</h2>
        <h2>水位:{{ height }}</h2>
        <button @click="changeTemp">水温+10</button>
        <button @click="changeHeight">水位+10</button>
    </div>
</template>
<script lang="ts" setup name='Person'>
import { reactive, ref, watch, watchEffect } from "vue";
let temp = ref(10)
let height = ref(0)


function changeTemp() {
    temp.value += 10
}
    

/* 
* 官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

* `watch`对比`watchEffect`

  > 1. 都能监听响应式数据的变化，不同的是监听数据变化的方式不同
  >
  > 2. `watch`：要明确指出监视的数据
  >
  > 3. `watchEffect`：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。
  
*/
function changeHeight() {
    height.value += 10
}
const stopWatch= watchEffect(() => {
        if (temp.value >=50  || height.value >=50) {
            console.log("发送服务器");
            
        }
        if (temp.value >=100  || height.value >=100) {
            console.log("青促会");
            stopWatch()
        }
    })
</script>
<style scoped>
/*  组件的样式 */
    .person{
            /* 设置颜色,设置阴影,
            设置元素的外边框圆角,使用一个半径可以确定一个圆形,当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。
            设置内边距
            */
        background-color: aqua;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }


</style>
